<template>
  <main>
    <div class="base">
      <el-divider style="width: 95%;" content-position="left"><h3>基本设置</h3></el-divider>
      <!--      <el-button style="height: 30px;border-radius: 30%" size="mini" >编辑</el-button>-->
    </div>
    <div id="baseMsg">
      <div class="options">
        <p>是否展示个人动态</p>
        <p>是否展示个人信息</p>
      </div>
      <div class="msg">
        <p>
          <el-switch
              :active-value="1"
              :inactive-value="0"
              @change="dynamicChange()"
              v-model="dynamicShow"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </p>
        <p>
          <el-switch
              :active-value="1"
              :inactive-value="0"
              @change="archivesChange()"
              v-model="archiveShow"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </p>

      </div>

    </div>
    <div class="contact">
      <el-divider style="width: 95%;" content-position="left"><h3>安全设置</h3></el-divider>
    </div>
    <div id="contactMsg">
      <div class="options" style="width: 5%">
        <p>密码</p>
        <!--        <p>手机</p>-->
      </div>
      <div class="msg" style="width: 82%">
        <p><el-button size="mini" @click="changePwdShow=true">修改密码</el-button></p>
        <div v-if="changePwdShow">
          <el-input autofocus="autofocus" style="width: 240px" v-model="oldPwd" show-password placeholder="请输入原密码" size="mini"></el-input>
          <br><br>
          <el-input style="width: 240px" v-model="newPwd" show-password placeholder="请输入新密码" size="mini"></el-input>
          <br><br>
          <el-button @click="changePwd()" size="mini">提交</el-button>
          <el-button @click="changePwdShow=false;oldPwd='';newPwd=''" size="mini">取消</el-button>
        </div>

      </div>

    </div>
  </main>
</template>

<script>
import {dynamicVisible, archivesVisible, getArchives, changePassWord} from "../../network/user";
import {Message} from 'element-ui'

export default {
  name: "setting",
  data(){
    return{
      oldPwd:'',
      newPwd:'',
      changePwdShow:false,
      dynamicShow:'1',
      archiveShow:'',
      uid:localStorage.getItem("userId"),
      uType:localStorage.getItem("userType")
    }
  },
  created() {
    this.getVisible()
  },

  methods:{
    changePwd(){
      changePassWord(this.uid,this.newPwd,this.oldPwd,this.uType)
        .then(res=>{
          if(res.data.code===100){
            this.$message.success("密码修改成功,下次请使用新密码登入~")
            this.$router.push('/home')
          }else {
            this.$message.warning("修改失败,输入的原密码不正确~")
            this.newPwd=''
            this.oldPwd=''
          }
        })},

    judgeType(extend){      //判断传过来的信息属于什么身份
      if(extend.student!=undefined){
        return extend.student
      }else if(extend.company!=undefined){
        return extend.company
      }
      return extend.university
    },
    getVisible(){
      getArchives(this.uType,this.uid,true)
          .then(res=>{
            console.log(res)
            this.dynamicShow=this.judgeType(res.data.extend).visible
            this.archiveShow=this.judgeType(res.data.extend).archivesVisible
          })
    },
    dynamicChange(){
      console.log(this.dynamicShow)
      dynamicVisible(this.uid,this.uType)
          .then(res=>{
            console.log(res)
            Message.success(res.data.msg)
          })
    },
    archivesChange(){
      console.log(this.archiveShow)
      archivesVisible(this.uid,this.uType)
          .then(res=>{
            console.log(res)
            Message.success(res.data.msg)
          })
    }
  }
}
</script>

<style scoped>
main{
  width: 70%;
  box-sizing: border-box;
  padding: 2% 10%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
}
.base{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact{
  width: 100%;
}
#baseMsg{
  width: 90%;
  height: 180px;
  font-size: 15px;
  color: rgb(128,128,128);
  display: flex;
  justify-content: space-between;
}
#contactMsg{
  width: 90%;
  height: 220px;
  font-size: 15px;
  color: rgb(128,128,128);
  display: flex;
  justify-content: space-between;
}
.options{
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.msg{
  color: black;
  width: 76%;
  display: flex;
  flex-direction: column;
}
</style>